<template>
<div id="register">
	<div class="container-fluid register-box">
		<h3 class="auth-title">注册账号</h3>
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item class="auth-line" prop="phone">
				<auth-input icon="icon-shouji" v-model="form.phone" placeholder="请输入手机号码" />
			</el-form-item>

			<el-form-item class="auth-line" prop="email">
				<auth-input icon="icon-email" v-model="form.email" placeholder="请输入电子邮箱" />
			</el-form-item>

			<el-form-item class="auth-line" prop="username">
				<auth-input class="pull-left" icon="icon-user" style="width: 50%;" placeholder="姓氏" v-model="form.last_name"/>
				<auth-input class="pull-left" style="width: 50%;border-left: 1px solid #eaeaea;    box-sizing: border-box;" v-model="form.first_name" placeholder="名字"/>
			</el-form-item>

			<el-form-item class="auth-line" prop="password">
				<auth-input icon="icon-mima" type="password" v-model="form.password" placeholder="请输入您的密码" />
			</el-form-item>

			<button type="button" class="btn btn-rect auth-btn" @click="register">立即注册</button>
		</el-form>

		<div class="auth-line auth-links">
			<router-link to="login" tag="div" class="pull-left">
				返回登录
			</router-link>
		</div>
	</div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader';
import AuthInput from '~/components/AuthInput';
import api from '~/api/api.js';

export default {
	name: 'register',
	components: {
		SubPageHeader,
		AuthInput
	},
	data () {
		var checkPassword = (rule, value, callback) => {
			if (!value) {
	          return callback(new Error('密码不能为空'));
	        }
	        if (value !== this.password) {
	        	return callback(new Error('两次密码输入不一致'));
	        }
		}
		return {
			form: {
				phone: '',
				email: '',
				password: '',
				passwordConfirmation: '',
				username: '',
				nickname: '',
				first_name: '',
				last_name: '',
			},
			rules: {
				phone: [
					{ required: true, message: '请输入活动名称'},
					{ pattern: /^[0-9]+$/, message: '请输入正确的手机号码', trigger: 'blur'}
				],
				email: [
					{ required: true, message: '请输入email'},
					{ pattern: /^.+@.+$/, message: '请输入正确邮箱', trigger: 'blur'}
				],
				username: [
					{ required: true, message: '请输入名称'},
				],
				password: [
					{required: true, message: '请输入密码'},
					{min: 6, message: '密码不能小于六位', trigger: 'blur'}
				],
			}
		}
	},
	watch: {
		form: {
			handler: function (val, oldVal) {
				val.username = val.first_name+val.last_name;
				val.nickname = val.username
			},
      		deep: true
		}
	},
	methods : {
		register () {
			this.$refs['form'].validate(valid => {
				if (!valid) {
					return;
				}
				api.post('/register', this.form)
					.then(response => {
						this.$store.commit('login', response.data);
						this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect : '/');
					})
					.catch(error => {
						if (error.message) {
							this.$message.error();
						}
					});
			})

		}
	}
}
</script>

<style scoped>
#register {
	padding-top: 1px;
	height: 100%;
}
.footer-bar {
	margin-top: 10px;
}
.to-login {
	color: #58B7FF;
}
</style>
